<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./通用/搜索栏.css">
    <style type="text/css">
		html{font-size: 100px;}
		body{font-size: 16px;}
		#iot-div1{position:fixed;top: 0;right: 0.05%;z-index:1;}
        #iot-img-sousuo{left:1%;}
        #iot-input1{text-align: left;padding-left: 7%;}
        #iot-div1-2-1{padding-right: 7%;}
        a{text-decoration: none;}
	</style>
</head>
<body>
    <!-- 搜索框 -->
    <div id="iot-div1">
		<div id="iot-div1-1">黑马优购</div>
		<div id="iot-div1-2">
			<div id="iot-div1-2-1">
				<input type="text" placeholder="请输入搜索内容" id="iot-input1" >
				<img src="./image/搜索.png" id="iot-img-sousuo"  >
			</div>
		</div>
	</div>
    <!--文档流漏洞-->
    <div id="iot-div2"></div> 
    <!-- 搜索结果呈现 -->
    <div id="iot-div-search">
     <ul id="iot-ul2" style="background-color:white;width: 100%;margin: 0;padding: 0;">
        </ul>
        </div>
</body>
<script src="./通用/搜索栏.js" type="module"></script>
<script src="./搜索功能.js" type="module"></script>
<script>
var div2 = document.getElementById("iot-div2");
var div1 = document.getElementById("iot-div1");
div2.style.marginTop = div1.offsetHeight+'px';//加上px才能生效
function changeHeight(){
    div2.style.marginTop = div1.offsetHeight+'px';
}
addEventListener("resize",changeHeight);
</script>
</html>